import React, {
  FC,
  MutableRefObject,
  useEffect,
  useRef,
  useState,
} from 'react';
import { history } from 'umi';
import { Button, Card, Modal, Tree, Form, Input, Space, Select } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

import './test.less';

const { Option } = Select;

const test = [1, 2, 3];

const Test: FC = (test) => {
  console.log(test);
  const [list, setList] = useState([1, 2, 3, 4, 5, 6]);
  const [isScroll, setIsScroll] = useState(true);

  const speed = 100;
  const warper: MutableRefObject<any> = useRef();
  const childDom1: MutableRefObject<any> = useRef();
  const childDom2: MutableRefObject<any> = useRef();

  const updateList = () => {
    for (let i = 6; i < 1000; i += 1) {
      setList([...list, i]);
    }
  };

  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (isScroll) {
      timer = setInterval(() => {
        // updateList();
        warper.current.scrollTop > childDom1.current.scrollHeight
          ? (warper.current.scrollTop = 0)
          : warper.current.scrollTop++;
      }, speed);
    }
    return () => {
      clearInterval(timer);
    };
  }, [isScroll]);

  return (
    <>
      <Card>
        <div className="parent" ref={warper}>
          <ul className="child" ref={childDom1}>
            {list.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
          <ul className="child" ref={childDom2}></ul>
        </div>
      </Card>
    </>
  );
};

export default Test;
